<template>
	<u-popup v-model="localVisible" mode="center" :mask="true" :border-radius="10">
		<view class="dialog-content">
			<!-- 标题：未使用→停卡，使用中→启用卡 -->
			<view class="dialog-title">
				{{ useStopCard === 'no_use' ? '停卡' : '启用卡' }}
			</view>
			
			<view class="dialog-desc">
				{{
					useStopCard === 'no_use' 
						? stopCardDesc || '您确定要对未使用的卡片执行停卡吗？' 
						: '您确定要启用当前使用中的卡片吗？' 
				}}
			</view>
			
		
			<view class="dialog-btns">
				<view class="cancel-btn" @click="handleCancel">取消</view>
				<view class="confirm-btn" @click="handleConfirm">
					{{ useStopCard === 'no_use' ? '确认停卡' : '确认启用' }}
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			useStopCard: {
				type: String,
				default: 'no_use' 
			},
			stopCardDesc: {
				type: String,
				default: '' 
			}
		},
		data() {
			return {
				localVisible: this.visible 
			}
		},
		watch: {
			// 监听父组件传递的visible变化，同步本地状态
			visible(val) {
				this.localVisible = val
			}
		},
		methods: {
			
			handleCancel() {
				this.$emit('update:visible', false); 
				this.$emit('cancel'); // 触发取消回调（父组件可选监听）
			},
			
			
			handleConfirm() {
				this.$emit('update:visible', false);
				this.$emit('confirm', {
					action:this.useStopCard === 'no_use' ? 'stop' : 'start',
					useStopCard: this.useStopCard // 当前状态（父组件可复用）
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog-content {
		width: 516rpx;
		height: 320rpx;
		background: #ffffff;
		border-radius: 16rpx;
	}

	.dialog-title {
		width: 100%;
		height: 92rpx;
		background: #f6f6f6;
		border-radius: 16rpx 16rpx 0 0;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		line-height: 92rpx;
		margin-bottom: 24rpx;
	}

	.dialog-desc {
		font-size: 24rpx;
		text-align: center;
		color: #666;
		line-height: 48rpx; // 增加行高，避免文案换行拥挤
	}

	.dialog-btns {
		display: flex;
		gap: 40rpx;
		justify-content: center;
		margin-top: 60rpx;
	}

	.cancel-btn,
	.confirm-btn {
		width: 198rpx;
		height: 68rpx;
		border-radius: 16rpx;
		text-align: center;
		line-height: 68rpx;
		font-size: 28rpx;
		font-weight: 700;
	}

	.cancel-btn {
		background: #f6f6f6;
		color: #000;
	}

	.confirm-btn {
		background: #73f0ea;
		color: #fff;
	}
</style>